<template>
  <div class="container">
    <div>{{name}}</div>
    <div>{{age}}</div>
    <button @click="updatename()">点击修改</button>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
export default {
  name: 'App',
  setup () {
    const obj = reactive({
      name: 'ls',
      age: 18
    })
    console.log(obj); //Proxy {name: "ls", age: 18}

    // 不再是响应式数据
    // const { name, age } = obj
    // console.log(name, age); //ls 18
    // const obj2 = { ...obj }
    // console.log(obj2); //{name: "ls", age: 18}

    // 修改成响应式数据,ObjectRefImpl响应式数据对象
    const obj2 = toRefs(obj)
    console.log(obj2);//{name: ObjectRefImpl, age: ObjectRefImpl}

    const updatename = () => {
      // obj2.name.value = 'ww'
      obj.name = 'vv'
    }

    return { ...obj2, updatename }
  }
}
</script>

<style>
</style>